<h2>OnValueChange</h2>
<form class="form-horizontal" #form="ngForm">
  <div class="form-group">
    <label class="col-sm-2 control-label">姓名</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="姓名"
             [(ngModel)]="person.name" name="name"minlength="2"
             greatByteLength="30" fieldName="errorMsg"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2 has-error" *ngIf="formErrors?.name">
      {{formErrors?.name}}
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">年龄</label>
    <div class="col-sm-10">
      <input type="number" class="form-control" placeholder="年龄"
             [(ngModel)]="person.age" name="age" #ageBox="ngModel"
             greatNumber="3" fieldName="errorMsg"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2 has-error" *ngIf="formErrors?.age">
      {{formErrors?.age}}
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">性别</label>
    <div class="col-sm-10">
      <label class="radio-inline">
        <input type="radio" name="gender" [(ngModel)]="person.gender.male" checked value="male"> 男
      </label>
      <label class="radio-inline">
        <input type="radio" name="gender" [(ngModel)]="person.gender.female" value="female"> 女
      </label>
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">邮箱</label>
    <div class="col-sm-10">
      <input type="email" class="form-control" placeholder="mail"
             [(ngModel)]="person.mail" name="mail"  required
             greatRegexp="^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$"  fieldName="errorMsg"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2 has-error" *ngIf="formErrors?.mail">
      {{formErrors?.mail}}
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">手机号</label>
    <div class="col-sm-10">
      <input class="form-control" placeholder="手机号"
             [(ngModel)]="person.mobile" name="mobile"
             greatMobile   fieldName="errorMsg"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2 has-error" *ngIf="formErrors?.mobile">
      {{formErrors?.mobile}}
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">办公电话</label>
    <div class="col-sm-10">
      <input class="form-control" placeholder="办公电话"
             [(ngModel)]="person.phone" name="phone"
             greatMobile   fieldName="errorMsg"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2 has-error" *ngIf="formErrors?.phone">
      {{formErrors?.phone}}
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">薪资</label>
    <div class="col-sm-10">
      <input class="form-control" placeholder="薪资"
             [(ngModel)]="person.salary" name="salary"
             greatNumber="6" scale="2" fieldName="errorMsg"
      >
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2 has-error" *ngIf="formErrors?.salary">
      {{formErrors?.salary}}
    </div>
  </div>
  <div class="form-group">
    <label class="col-sm-2 control-label">地址</label>
    <div class="col-sm-10">
      <textarea class="form-control" rows="3"
                [(ngModel)]="person.address" name="address"
                greatByteLength="100" fieldName="errorMsg"
      ></textarea>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-10 col-sm-offset-2 has-error" *ngIf="formErrors?.address">
      {{formErrors?.address}}
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> Remember me
        </label>
      </div>
    </div>
  </div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" [disabled]="!form.form.valid">保 存</button>
    </div>
  </div>
</form>
